<template>
<div>
  <div class="login-container">
    <el-row>
      <img src="../assets/logo1.png" style=" margin-top: 10vh;width: 36vw; height: auto" alt="">
    </el-row>
    <el-row>
      <span style="font-size: 1.6rem; letter-spacing: initial">浙江科技学院学工系统</span>
    </el-row>
    <el-row>
      <el-form ref="loginForm" :rules="rules" :inline="true" :model="userInfo" class="login-form">
        <el-form-item style="width: 70vw; margin: 4vh auto;" prop="id"
        >
          <el-input
            style="width: 70vw;"
            v-model="userInfo.id"
            clearable
            placeholder="请输入学号/教职工号/手机号"></el-input>
        </el-form-item>
        <el-form-item style="width: 70vw; margin: 0 auto;" prop="password">
          <el-input
            style="width: 70vw; margin: -4vh auto;"
            v-model="userInfo.password"
            type="password"
            clearable
            placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox
            class="login-checkBox"
            v-model="isCheck"><span style="white-space: pre-wrap !important">同意浙科学工系统用户使用协议、隐私保护政策</span></el-checkbox>
        </el-form-item>
      </el-form>
      <el-button style="width: 80vw;" type="primary" @click="login">登录</el-button>
    </el-row>
  </div>
</div>
</template>

<script>
export default {
  name: 'login',
  data () {
    const isNumberValidator = (rule, value, cb) => {
      const reg = new RegExp(/[^\d]/g)
      if (reg.test(value)) cb(new Error('请正确输入学号/教职工号/手机号'))
      else cb()
    }
    return {
      userInfo: {
        id: null,
        password: null
      },
      rules: {
        id: [
          { required: true, message: '请输入学号/教职工号/手机号', trigger: 'blur' },
          { validator: isNumberValidator, trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      isCheck: false
    }
  },
  methods: {
    login () {
      this.$router.push('/index')
      // this.$refs.loginForm.validate((e) => {
      //   if (e) {}
      // })
    }
  }
}
</script>

<style lang="stylus" scoped>
// 背景
.login-container
  width: 100vw
  height: 100vh
  background-image: url('../assets/启动页bg1.jpg')
  background-size: auto 100%
  background-repeat:no-repeat
  background-position: center 0
.login-form
  width: 80vw
  height: auto
  //background: black
  margin: 4vh auto
  background: rgba(255,255,255,0.1)
  border-radius: 20px
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
.login-checkBox
  width: 70vw
  height: 5vh
  display flex
  margin-top: 4vh
  //word-wrap: break-word
  //word-break: break-all
  //display:block
</style>
